<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="600"
    append-to-body
    show-close
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="cancelHandle"
  >
    <!-- Form -->
    <Form
      ref="formRef"
      :form="form"
      :config="config"
      :rules="rules"
      :name="name"
      label-width="80"
      width="100%"
      @change="changeHandle"
    >
      <template #manHour="{ data }">
        <!-- :auto-upload="false" -->
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          action="/api/upload/manHour"
          :limit="1"
          accept=".xlsx, .xls"
          :before-upload="beforeUpload"
          :on-exceed="handleExceed"
          :on-success="onSuccess"
        >
          <el-button type="primary">上传附件</el-button>
        </el-upload>
      </template>
    </Form>
    <!-- Footer -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelHandle">取消</el-button>
        <el-button type="primary" @click="searchHandle">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
// components
import Form from '@/components/Form/Form.vue'
// hooks
import useDialog from '@/hooks/useDialog'
import useForm from '@/hooks/useForm'
// others
import { ref } from 'vue'
import { aFormData, aFormConfig, aFormRules } from './config'
import { ElMessage } from 'element-plus'

// emits
const emit = defineEmits(['confirm'])

// Dialog
const { visible, hide, show } = useDialog()
const confirm = () => {
  hide()
  emit('confirm')
}
const title = ref('导入工时')

/** Form */
const formRef = ref()
const { form, config, rules, submitForm, resetForm } = useForm({
  formRef,
  formData: aFormData,
  formConfig: aFormConfig,
  formRules: aFormRules
})
const cancelHandle = () => {
  hide()
  resetForm()
}
const searchHandle = async () => {
  submitForm(() => {
    confirm()
    resetForm()
  })
}

const changeHandle = (value, prop, item) => {
  console.log(111, value, prop, item)
}

/** 上传附件 */
const uploadRef = ref()
const imageUrl = ref('')
const beforeUpload = (rawFile) => {
  const acceptList = ['xlsx', 'xls']
  const fileType = rawFile.name.split('.').pop().toLowerCase()
  if (acceptList.indexOf(fileType) === -1) {
    ElMessage.error('只能上传 .xlsx, .xls 格式的文件 !')
    return false
  }
}
const handleExceed = (files) => {
  console.log(9999)
}
const onSuccess = (response, uploadFile) => {
  console.log(9999454546)
}

defineExpose({
  visible,
  hide,
  show
})
</script>

<style lang="less" scoped></style>
